<template>
    <div style="height: 500px;display: flex; flex-direction: column;">
      
        <basicTableSum ref="editTableRef" v-bind="tableConfig" @changeSelection="changeCheck" @editFormFun="editFormClick">
            <!-- #[removeDoubleMarks(headData.field)] -->
            <template  #tableCol3="{scope}" >
          
                    <!-- <el-select v-model="scope.value" placeholder="Select" >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select> -->
                <qfInput v-model="scope.value"></qfInput>
            </template>
           
            
            <!-- <template #handle="{ row }" type="button">
                <div>
                    <el-button type="primary" link>新增</el-button>
                </div>
            </template> -->
        </basicTableSum>

    </div>
</template>
<script setup lang="ts" name="MerakeEditTable">
    import basicTableSum from "@/components/MerakEditTable/components/basicTable/moreEdit.vue";
    import qfInput from "@/components/MerakEditTable/components/a-qfInput/index.vue";
    import {
        Check,
        Delete,
        Edit,
        Message,
        Search,
        Star,
    } from '@element-plus/icons-vue'
    import { ref, reactive, defineProps, onMounted, computed } from 'vue';


    const editTableRef=ref(null);
    const value2 = ref('')


    const saveFun=()=>{
      console.log(editTableRef.value.submitData(tableData))
    }

    const changeCheck = (params) => {
        console.log(params)
    }


    const editFormClick=(params)=>{
        console.log(params)
    }


    // const paramsObj = reactive([date, name, address]);
    const tableHeadData = reactive([]);
    const tableData = reactive([]);
    const headConfig = reactive({});//头部配置是否可编辑
    console.log(tableData)
    // 行列选中样式  当前选中样式
    // 行尾部和删除
    const tableConfig = reactive({
        headData: tableHeadData,//表格头部数据
        tableData: tableData,//表格内容数据
        headConfig: headConfig,//可编辑列类型
        selection: false,//是否显示checkbox   
        editStatus:false,//开启虚拟加载,关闭新增保存
 

    })

    // headConfig:{
    //     column1:{
    //     type:'select',
    //     options:[]
    //       }, //select\input\date
    //     }
    // {
    //     title: 'title',
    //     field: 'key',
    //     fixed: 'left',
    //     width: '200px'
    // }

    let number1 = 100;
    let number = 500;
    const initData = () => {
        console.time("for")
        let headArr = [];
        let headCon={}; 
        for (let c = 0; c < number1; c++) {
            let key = "tableCol" + c,
                title = "column" + c; 
            let objParams = {};
           
            switch (c) {
                case 0: 
                //    objParams.type='select';
                    objParams.fixed = "left";
                 
                    break;
                    case 1:
                //    objParams.type='select';
                    // objParams.fixed = "left";
                    // headCon[key]={
                    //     type:"select",
                    //     multiple:true,
                    //     options:options
                    // };
                    headCon[key]="input";
                    break;
                case 2:
                case 3:
                // objParams.type='date';
                headCon[key]="date";
                    break;
                case 4:
                case 5:
                case 6:
                headCon[key]={
                        type:"select", 
                        options:options
                    };
                    break;
                default:
                // objParams.type='input';
                headCon[key]="input";
                    break;
            }
            headArr.push({
                ...objParams, ...{
                    title: title,
                    field: key,
                }
            })
            // if (c == 0) {

            // } else if (c == 1) {
            //     headArr.push(
            //         {
            //             title: title,
            //             field: key,
            //             fixed: 'left',
            //         }
            //     )
            // } else {
            //     headArr.push(
            //         {
            //             title: title,
            //             field: key
            //         }
            //     )
            // }


        } 
        console.log(headCon)
        Object.assign(headConfig, headCon);
        Object.assign(tableHeadData, headArr);
        let TableNew = [];
        for (let i = 0; i < number; i++) {
            let objKey = {}
            for (let c = 0; c < number1; c++) {
                let key = "tableCol" + c,
                    value = "Row " + i + "-" + "col " + c;
                if (c == 1) {
                    value = "RowRowRow " + i + "-" + "colcolcol " + c;
                }
                let errTip="";
                if(c==1&&i==3){
                  errTip="错误信息。。。"
                }

                objKey[key] = {
                    label: value,
                    value:"1",
                    errTip:errTip
                };
            }
            TableNew.push(objKey);
            // TableNew.push({
            //     index: i,
            //     date: '2016-05-03',
            //     name: 'Tom',
            //     address: 'No. 189, Grove St, Los Angeles',
            //    selection:true
            // })
        }

        Object.assign(tableData, TableNew)
        console.timeEnd("for")
    }

    const options = [
  {
    value: '1',
    label: 'Option1',
  },
  {
    value: '2',
    label: 'Option2',
  },
  {
    value: '3',
    label: 'Option3',
  },
  {
    value: '4',
    label: 'Option4',
  },
  {
    value: '5',
    label: 'Option5',
  },
  {
    value: '1',
    label: 'Option1',
  },
  {
    value: '2',
    label: 'Option2',
  },
  {
    value: '3',
    label: 'Option3',
  },
  {
    value: '4',
    label: 'Option4',
  },
  {
    value: '5',
    label: 'Option5',
  },
  {
    value: '1',
    label: 'Option1',
  },
  {
    value: '2',
    label: 'Option2',
  },
  {
    value: '3',
    label: 'Option3',
  },
  {
    value: '4',
    label: 'Option4',
  },
  {
    value: '5',
    label: 'Option5',
  },
  {
    value: '1',
    label: 'Option1',
  },
  {
    value: '2',
    label: 'Option2',
  },
  {
    value: '3',
    label: 'Option3',
  },
  {
    value: '4',
    label: 'Option4',
  },
  {
    value: '5',
    label: 'Option5',
  },
  {
    value: '1',
    label: 'Option1',
  },
  {
    value: '2',
    label: 'Option2',
  },
  {
    value: '3',
    label: 'Option3',
  },
  {
    value: '4',
    label: 'Option4',
  },
  {
    value: '5',
    label: 'Option5',
  },

  {
    value: '1',
    label: 'Option1',
  },
  {
    value: '2',
    label: 'Option2',
  },
  {
    value: '3',
    label: 'Option3',
  },
  {
    value: '4',
    label: 'Option4',
  },
  {
    value: '5',
    label: 'Option5',
  },
]


    onMounted(() => {
        initData()
    })

</script>
<style lang="scss" scoped>
    @import url(./index.scss);
</style>